<template>
  <div id='searchs'>
    <header>
      <div>
        <div class="hd-l" @click='back'>
          <i class="iconfont icon-fanhui"></i>
        </div>
        <input type="search" placeholder="请输入商品名称" class="search" @keyup.enter='getWord($event)' ref='search'>
      </div>
    </header>
    <section class="common" v-if='words.loader'>
      <div class="left">
        <span>历史搜索</span>
        <svg viewBox="0 0 512 512" id="bin" width="100%" height="100%" @click='deletes'>
          <path d="M64 160v320c0 17.6 14.4 32 32 32h288c17.6 0 32-14.4 32-32V160H64zm96 288h-32V224h32v224zm64 0h-32V224h32v224zm64 0h-32V224h32v224zm64 0h-32V224h32v224zM424 64H320V24c0-13.2-10.8-24-24-24H184c-13.2 0-24 10.8-24 24v40H56c-13.2 0-24 10.8-24 24v40h416V88c0-13.2-10.8-24-24-24zm-136 0h-96V32.401h96V64z"></path>
        </svg>
      </div>
      <div class="bottom">
        <span v-for='(word,index) in words.search_word' :key='index' @click='getSite($event)'>{{word}}</span>
      </div>
    </section>
    <section class="common">
      <div class="left">
        <span>热门搜索</span>
      </div>
      <div class="bottom">
        <span v-for='(site,index) in sites' :key='index' @click='getSite($event)'>
          {{site.word}}
        </span>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios';
import { mapState } from 'vuex';
export default {
  name: 'searchs',
  data() {
    return {
      words: {
        loader: false,
        search_word: []
      },
      sites: []
    }
  },
  computed: {
    ...mapState(['position'])
  },
  mounted() {
    //  会话存储中获取含有经纬度的对象
    var position = JSON.parse(sessionStorage.getItem('id'));
    var that = this;
    axios.get('http://localhost:3000/shopping/hot_search_words', {
      params: {
        lng: position.lng,
        lat: position.lat
      }
    }).then(function (successCB) {
      var data = successCB.data;
      that.sites = data;
    }).catch(function (errorCB) {
      console.log('Search页网络异常！');
    })

    //  获取历史搜索
    var value = localStorage.getItem('search_word');
    this.words.search_word = JSON.parse(value);
    if (value) {
      this.words.loader = true;
    } else {
      this.words.loader = false;
    }
  },
  methods: {
    back: function () {
      window.history.go(-1);
    },
    deletes: function () {
      this.words.loader = false;
      localStorage.removeItem('search_word');
    },
    getWord: function (event) {
      var a = localStorage.getItem('search_word');
      var value = this.$refs.search.value;
      var encrypt = encodeURIComponent(value);
      var btn = JSON.parse(a);
      if (!a) {
        var arr = [];
        arr.push(value);
        localStorage.setItem('search_word', JSON.stringify(arr));
      }
      if (a && btn.indexOf(value) === -1) {
        var c = JSON.parse(a);
        c.unshift(value);
        localStorage.setItem('search_word', JSON.stringify(c));
      }
      this.$router.push({
        path: '/search/shop',
        query: {
          temp: encrypt
        }
      });
    },
    getSite: function (event) {
      var value = event.currentTarget.innerText;
      //  加密搜索关键字
      // var encrypt = encodeURIComponent(value);
      this.$refs.search.value = value;
      this.getWord();
      this.$router.push({
        path: '/search/shop',
        query: {
          temp: value
        }
      });
    }
  }
}
</script>

<style lang='scss'>
@import '../../static/hotcss/px2rem.scss';
#searchs {
  background-color: #FFF;
  header {
    >div {
      width: 100%;
      display: flex;
      padding: px2rem(11) px2rem(11);
      box-sizing: border-box;
      align-items: center;
    }
    .hd-l {
      display: inline-block;
      width: px2rem(20);
      height: px2rem(20);
      margin-right: px2rem(10);
    }
    i {
      font-size: px2rem(20);
      color: #999;
      font-weight: bold;
    }
    .search {
      width: 100%;
      padding: px2rem(10) px2rem(15);
      border: 0;
      outline: none;
      background-color: #F8F8F8;
      border-radius: px2rem(20);
      color: #666;
      font-size: px2rem(15);
    }
     ::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #999;
      font-size: px2rem(14);
    }
     :-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #999;
    }
     ::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #999;
    }
     :-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: #999;
    }
  }
  .common {
    padding: px2rem(15/2) px2rem(25/2) px2rem(25/2);
    .left {
      display: flex;
      justify-content: space-between;
      margin-bottom: px2rem(15);
      span {
        color: #666;
        font-size: px2rem(16);
        font-weight: bold;
      }
      svg {
        width: px2rem(13);
        fill: #CCC;
      }
    }
    .bottom {
      span {
        display: inline-block;
        font-size: px2rem(14);
        color: #666;
        padding: px2rem(15/2) px2rem(10);
        background-color: #f7f7f7;
        border-radius: px2rem(5);
        margin-right: px2rem(10);
        margin-bottom: px2rem(14);
      }
    }
  }
}
</style>
